<template>
	<view class="marks" v-if="show">
		<u-cell-group title="订单信息：">
			<u-cell-item title="订单编号" :value="orderInfo.order_sn" :arrow="false"></u-cell-item>
			<u-cell-item title="工厂编号" :value="orderInfo.factory_sn" :arrow="false"></u-cell-item>
			<u-cell-item title="订单总包件数" :value="orderInfo.pack_name" :arrow="false"></u-cell-item>
			<u-cell-item title="包件数" :value="orderInfo.goods_pack+'件'" :arrow="false"></u-cell-item>
			<u-cell-item title="收货人" :value="orderInfo.accept_name" :arrow="false"></u-cell-item>
			<u-cell-item title="收货电话" :value="orderInfo.mobile_phone" :arrow="false"></u-cell-item>
			<u-cell-item title="收货地区" :value="orderInfo.province+','+orderInfo.city+','+orderInfo.area"
				:arrow="false"></u-cell-item>
			<u-cell-item title="收货详细地址" :value="orderInfo.address" :arrow="false"></u-cell-item>
		</u-cell-group>
		<view class="title">商品信息</view>
		<view class="goods-info">
			<image :src="orderInfo.image_middle" mode="aspectFill"></image>
			<view class="goods-info-box">
				<view class="goods-name">{{orderInfo.goods_name}}</view>
				<view class="goods-sku">sku编号：{{orderInfo.sku_sn}}</view>
				<view class="goods-sku">商品属性：{{orderInfo.goods_color}}、{{orderInfo.goods_size}}</view>
			</view>
		</view>
		<!-- <view class="title">分区信息</view>
		<view class="region-info">
			{{orderInfo.region_id?'此商品所在分区：'+orderInfo.region_name:'未分区'}}
		</view> -->
		<view class="title">唛头信息</view>
		<view class="maitou_list" v-for="(data,index) in orderInfo.maitou_list" :key="index">
			<view class="index">
				<view>第{{index+1}}件</view>
				<view>是否入仓：{{data.maitou_warehouse==1?'已入仓':'未入仓'}}</view>
				<view v-if="data.maitou_warehouse==1">入仓时间：{{data.maitou_warehouse_time}}</view>
				<view v-if="data.maitou_warehouse==1">是否出仓：{{data.maitou_outbound==0?'未出仓':'已出仓'}}</view>
				<view v-if="data.maitou_outbound==1">出仓时间：{{data.maitou_outbound_time}}</view>
			</view>
			<view class="btn" v-if="(userInfo.is_admin==7 || userInfo.is_admin==32) && data.maitou_warehouse==0"
				@click="enterStock(data.maitou_id)">点击入仓</view>
			<view class="btn"
				v-if="(userInfo.is_admin==7 || userInfo.is_admin==32) && data.maitou_warehouse==1 && data.maitou_outbound==0 && orderInfo.is_deliver==1"
				@click="outStock(data.maitou_id,index)" style="background-color: red;">点击出仓</view>
		</view>
		<view class="send-bottom" v-if="userInfo.is_admin==7 || userInfo.is_admin==32">
			<!-- <view class="send-btn" v-if="!orderInfo.region_id" @click="showRegion=!showRegion">设置分区</view> -->
			<!-- <view class="send-btn" v-else>商品所在区：{{orderInfo.region_name}}</view> -->
			<view class="send-btn" @click="changeNumF" v-if="orderInfo.is_confirm==0" style="margin-left: 30rpx;">修改包件数
			</view>
			<view class="send-btn-1" @click="sendAllStock" v-if="orderInfo.is_outbound==0 && orderInfo.is_deliver==1"
				style="color: red; border-color: red;">全部出仓</view>
			<view class="send-btn-1" @click="sendAllShip" v-if="orderInfo.is_outbound==1 && orderInfo.is_deliver==1">发货
			</view>
		</view>
		<uni-popup type="bottom" ref="changeNum">
			<view class="changeNum">
				<input type="number" placeholder="请输入要修改的包件数" v-model="changeNum" />
				<view class="btn" @click="confirmChange">确认修改</view>
			</view>
		</uni-popup>
		<u-select v-model="showRegion" :list="regionList" label-name="region_name" value-name="region_id"
			child-name="child" mode="mutil-column-auto" @confirm="confirmRegion">
		</u-select>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				orderInfo: '',
				rec_id: '',
				maitou_id: '',
				userInfo: '',
				changeNum: '',
				regionList: [],
				showRegion: false
			};
		},
		onLoad(options) {
			this.rec_id = options.rec_id
			this.maitou_id = options.maitou_id
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl', curPage.$page.fullPath)
			this.init()
			this.getSelectRegionList()
		},
		methods: {
			async getSelectRegionList() {
				const { datas } = await this.$u.api.SelectRegionList()
				this.regionList = datas
			},
			init() {
				this.$u.api.OrderItems({ rec_id: this.rec_id }).then(res => {
					this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
					this.show = true
					this.orderInfo = res.datas
				}).then(() => {
					if (this.orderInfo.is_confirm == 0) {
						uni.showModal({
							title: '请确认包件数',
							content: '当前商品包件数为' + this.orderInfo.maitou_list.length + '件',
							cancelText: '件数不对',
							cancelColor: 'red',
							confirmText: '确认无误',
							success: (action) => {
								if (action.confirm) {
									this.$u.api.OrderGoodsPackConfirm({
										order_id: this.orderInfo.order_id,
										rec_id: this.orderInfo.rec_id,
									}).then(res => {
										uni.showToast({
											icon: 'none',
											title: '确认成功，如需再次修改请去后台修改',
											duration: 1500,
											success: () => {
												this.init()
											}
										})
									})
								} else if (action.cancel) {
									this.$refs.changeNum.open()
								}
							}
						})
					}
				})
			},
			enterStock(maitou_id) {
				uni.showModal({
					title: '温馨提示',
					content: '是否已核对清楚信息并入仓？',
					success: (confrim) => {
						if (confrim.confirm) {
							this.$u.api.IntoWarehouse({ maitou_id: maitou_id }).then(res => {
								uni.showToast({
									icon: 'none',
									title: '入仓成功',
									success: () => {
										this.init()
									}
								})
							})
						}
					}
				})
			},
			sendAll() {
				uni.showModal({
					title: '温馨提示',
					content: '是否确定全部已入仓？',
					success: (confrim) => {
						if (confrim.confirm) {
							this.$u.api.AllIntoWareHouse({
								rec_id: this.rec_id,
								order_id: this.orderInfo
									.order_id
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '全部入仓成功',
									success: () => {
										this.init()
									}
								})
							})
						}
					}
				})
			},
			sendAllShip() {
				uni.navigateTo({
					animationDuration: 500,
					url: '/events/order-details?id=' + this.orderInfo.order_id + '&warehouse=true'
				})
			},
			changeNumF() {
				this.$refs.changeNum.open()
			},
			confirmChange() {
				if (!this.changeNum) {
					uni.showToast({
						icon: 'none',
						title: '请输入要修改的包件数'
					})
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '确认修改包件数后无法再次修改，如果需要修改请到后台修改，是否确认修改？',
					success: (confrim) => {
						if (confrim.confirm) {
							this.$u.api.UpdateOrderGoodsPack({
								order_id: this.orderInfo.order_id,
								rec_id: this.orderInfo.rec_id,
								goods_pack: this.changeNum
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '修改成功，如需再次修改请去后台修改',
									duration: 1500,
									success: () => {
										this.changeNum = ''
										this.$refs.changeNum.close()
										this.init()
									}
								})
							})
						}
					}
				})
			},
			sendAllStock() {
				uni.showModal({
					title: '温馨提示',
					content: '请确认所有商品是否已出仓？',
					success: (success) => {
						if (success.confirm) {
							this.$u.api.AllOutboundWarehouse({
								rec_id: this.rec_id,
								order_id: this.orderInfo.order_id
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '全部出仓成功',
									success: () => {
										this.init()
									}
								})
							})
						}
					}
				})
			},
			outStock(maitou_id, index) {
				uni.showModal({
					title: '温馨提示',
					content: `是否确认包件${index+1}已出仓？`,
					success: (success) => {
						if (success.confirm) {
							this.$u.api.OutboundWarehouse({
								maitou_id
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: `包件${index+1}出仓成功`,
									success: () => {
										this.init()
									}
								})
							})
						}
					}
				})
			},
			confirmRegion(e) {
				uni.showModal({
					title: '所选分区：' + e[1].label,
					content: '请确认分区信息是否正确',
					success: async (res) => {
						if (res.confirm) {
							const { datas } = await this.$u.api.UpdateOrderGoodsRegion({
								order_id: this.orderInfo.order_id,
								rec_id: this.orderInfo.rec_id,
								region_id: e[1].value,
							})
							uni.showToast({
								icon: 'none',
								title: '设置成功',
								success: () => {
									this.init()
								}
							})
						}
					}
				})
			}
		}
	}

</script>

<style lang="scss">
	.marks {
		padding-bottom: 130rpx;

		.title {
			padding: 15px 16px 5px 16px;
			color: #909399;
			font-size: 30rpx;
			border-bottom: solid 1px #e4e7ed;
		}

		.goods-info {
			display: flex;
			align-items: flex-start;
			padding: 30rpx;
			border-bottom: solid 1px #e4e7ed;

			image {
				width: 240rpx;
				height: 240rpx;
			}

			.goods-info-box {
				margin-left: 30rpx;

				.goods-name {
					font-weight: bold;
				}

				.goods-sku {
					margin: 20rpx 0;
					color: #666;
				}
			}
		}

		.maitou_list {
			border-bottom: solid 1px #e4e7ed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: solid 1px #e4e7ed;
			padding: 30rpx;

			.index {
				view {
					color: #666;
					font-size: 28rpx;
					line-height: 48rpx;
				}
			}

			.btn {
				line-height: 50rpx;
				background-color: #F59359;
				color: #FFF;
				border-radius: 10rpx;
				padding: 0 20rpx;
			}
		}

		.send-bottom {
			position: fixed;
			height: 100rpx;
			padding: 15rpx 30rpx 0;
			display: flex;
			justify-content: flex-end;
			bottom: 0;
			background-color: #FFF;
			z-index: 3;
			left: 0;
			right: 0;
			border-top: solid 1px #e4e7ed;

			.send-btn {
				height: 70rpx;
				line-height: 70rpx;
				background-color: #F59359;
				color: #FFF;
				padding: 0 20rpx;
				border-radius: 10rpx;
			}

			.send-btn-1 {
				height: 70rpx;
				line-height: 70rpx;
				color: #F59359;
				border: solid 1px #F59359;
				padding: 0 20rpx;
				border-radius: 10rpx;
				margin-left: 30rpx;
			}
		}

		.changeNum {
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 10rpx 10rpx 0 0;

			input {
				font-size: 28rpx;
				padding: 0 0 30rpx;
			}

			.btn {
				line-height: 90rpx;
				background-color: #141414;
				text-align: center;
				color: #FFF;
				border-radius: 8rpx;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}

		.region-info {
			padding: 30rpx;
			border-bottom: solid 2rpx #e4e7ed;
			color: #F59359;
			font-weight: bold;
			font-size: 32rpx;
		}
	}

</style>

